<template>
  <div class="overview-page">
    <!-- 顶部欢迎区域 -->
    <div class="welcome-section">
      <div class="welcome-content">
        <div class="welcome-text">
          <h1 class="welcome-title">早上好，管理员！ 👋</h1>
          <p class="welcome-subtitle">{{ currentDate }} | {{ weatherInfo }}</p>
          <p class="welcome-desc">今天也要努力工作哦，查看您的数据概览</p>
        </div>
        <div class="quick-actions">
          <el-button type="primary" :icon="Plus" @click="handleQuickAction('add')">
            新增用户
          </el-button>
          <el-button type="success" :icon="Document" @click="handleQuickAction('report')">
            生成报告
          </el-button>
          <el-button type="warning" :icon="Setting" @click="handleQuickAction('setting')">
            系统设置
          </el-button>
        </div>
      </div>
    </div>

    <!-- 数据概览卡片 -->
    <div class="data-overview">
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6" v-for="(stat, index) in statsData" :key="index">
          <el-card class="stat-card" :class="`stat-card-${index + 1}`" @click="handleStatClick(stat)">
            <div class="stat-content">
              <div class="stat-icon">
                <el-icon :size="32" :color="stat.color">
                  <component :is="stat.icon" />
                </el-icon>
              </div>
              <div class="stat-info">
                <div class="stat-number" :data-value="stat.value">
                  {{ animatedNumbers[index] }}
                </div>
                <div class="stat-label">{{ stat.label }}</div>
                <div class="stat-trend" :class="stat.trend.type">
                  <el-icon size="12">
                    <component :is="stat.trend.type === 'positive' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  {{ stat.trend.value }}
                </div>
              </div>
            </div>
            <div class="stat-progress">
              <el-progress 
                :percentage="stat.progress" 
                :color="stat.color" 
                :show-text="false" 
                :stroke-width="3"
              />
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 图表和实时数据区域 -->
    <el-row :gutter="20" class="chart-row">
      <!-- 访问趋势图表 -->
      <el-col :span="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <div class="header-info">
                <span class="card-title">访问趋势</span>
                <span class="card-subtitle">最近7天数据分析</span>
              </div>
              <div class="header-actions">
                <el-button-group>
                  <el-button 
                    v-for="period in timePeriods" 
                    :key="period.value"
                    :type="selectedPeriod === period.value ? 'primary' : ''"
                    size="small"
                    @click="changePeriod(period.value)"
                  >
                    {{ period.label }}
                  </el-button>
                </el-button-group>
                <el-button :icon="Refresh" size="small" @click="refreshData" circle />
              </div>
            </div>
          </template>
          <div class="chart-container" ref="chartContainer">
            <div class="loading-placeholder" v-if="isLoading">
              <el-icon class="is-loading" size="32" color="#409eff">
                <Loading />
              </el-icon>
              <p>数据加载中...</p>
            </div>
            <div v-else class="chart-content">
              <!-- ECharts 折线图 -->
              <v-chart 
                class="echarts-chart" 
                :option="chartOption" 
                autoresize
                @click="handleChartClick"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 实时数据和排行榜 -->
      <el-col :span="8">
        <el-card class="ranking-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">实时访问</span>
              <el-tag type="success" size="small">
                <el-icon size="12"><VideoPlay /></el-icon>
                实时
              </el-tag>
            </div>
          </template>
          <div class="realtime-stats">
            <div class="realtime-number">
              <span class="number">{{ realtimeVisitors }}</span>
              <span class="label">当前在线</span>
            </div>
            <div class="realtime-chart">
              <div class="pulse-dot"></div>
            </div>
          </div>
          
          <el-divider>页面排行</el-divider>
          
          <div class="ranking-list">
            <div 
              v-for="(item, index) in rankingData" 
              :key="index"
              class="ranking-item"
              :style="{ animationDelay: index * 100 + 'ms' }"
            >
              <div class="rank" :class="`rank-${index + 1}`">{{ index + 1 }}</div>
              <div class="page-info">
                <div class="page-name">{{ item.name }}</div>
                <div class="page-path">{{ item.path }}</div>
              </div>
              <div class="visit-stats">
                <div class="visit-count">{{ item.visits }}</div>
                <div class="visit-trend" :class="item.trend.type">
                  <el-icon size="10">
                    <component :is="item.trend.type === 'up' ? 'ArrowUp' : 'ArrowDown'" />
                  </el-icon>
                  {{ item.trend.value }}
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 系统状态和快捷操作 -->
    <el-row :gutter="20" class="bottom-section">
      <!-- 系统状态 -->
      <el-col :span="8">
        <el-card class="system-card">
          <template #header>
            <span class="card-title">系统状态</span>
          </template>
          <div class="system-metrics">
            <div v-for="metric in systemMetrics" :key="metric.name" class="metric-item">
              <div class="metric-info">
                <span class="metric-name">{{ metric.name }}</span>
                <span class="metric-value">{{ metric.value }}%</span>
              </div>
              <el-progress 
                :percentage="metric.value" 
                :color="getMetricColor(metric.value)"
                :stroke-width="6"
                :show-text="false"
              />
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 最近活动 -->
      <el-col :span="8">
        <el-card class="activity-card">
          <template #header>
            <span class="card-title">最近活动</span>
          </template>
          <div class="activity-list">
            <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
              <div class="activity-avatar">
                <el-avatar :size="32" :src="activity.avatar" />
              </div>
              <div class="activity-content">
                <div class="activity-text">{{ activity.text }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 快捷工具 -->
      <el-col :span="8">
        <el-card class="tools-card">
          <template #header>
            <span class="card-title">快捷工具</span>
          </template>
          <div class="tools-grid">
            <div 
              v-for="tool in quickTools" 
              :key="tool.name"
              class="tool-item"
              @click="handleToolClick(tool)"
            >
              <el-icon :size="24" :color="tool.color">
                <component :is="tool.icon" />
              </el-icon>
              <span class="tool-name">{{ tool.name }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  ToolboxComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import { 
  Plus, 
  Document, 
  Setting, 
  User, 
  View, 
  DataLine, 
  Timer,
  Refresh,
  Loading,
  VideoPlay,
  ArrowUp,
  ArrowDown,
  TrendCharts,
  Monitor,
  Files,
  Switch,
  Tools,
  Download,
  Upload,
  Bell
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 注册 ECharts 组件
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent,
  DataZoomComponent,
  ToolboxComponent
])

// 响应式数据
const isLoading = ref(false)
const selectedPeriod = ref('7d')
const realtimeVisitors = ref(0)
const animatedNumbers = ref([0, 0, 0, 0])

// 当前日期和天气信息
const currentDate = computed(() => {
  return new Date().toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    weekday: 'long'
  })
})

const weatherInfo = ref('晴朗 22°C')

// 时间周期选项
const timePeriods = [
  { label: '7天', value: '7d' },
  { label: '30天', value: '30d' },
  { label: '90天', value: '90d' }
]

// 统计数据
const statsData = reactive([
  {
    label: '总用户数',
    value: 125432,
    color: '#409eff',
    icon: 'User',
    trend: { type: 'positive', value: '+12.5%' },
    progress: 75
  },
  {
    label: '今日访问',
    value: 23891,
    color: '#67c23a',
    icon: 'View',
    trend: { type: 'positive', value: '+8.2%' },
    progress: 60
  },
  {
    label: '页面浏览',
    value: 456789,
    color: '#e6a23c',
    icon: 'DataLine',
    trend: { type: 'positive', value: '+15.3%' },
    progress: 85
  },
  {
    label: '平均时长',
    value: 235,
    color: '#f56c6c',
    icon: 'Timer',
    trend: { type: 'negative', value: '-3.1%' },
    progress: 45
  }
])

// 图表数据 - 根据时间周期生成不同数据
const chartDataSets = {
  '7d': {
    categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
    visitors: [4200, 3800, 5100, 4600, 5800, 3200, 4100],
    users: [2800, 2400, 3600, 3100, 4200, 2100, 2900],
    pageViews: [8400, 7200, 9800, 8900, 11200, 6400, 7800]
  },
  '30d': {
    categories: ['第1周', '第2周', '第3周', '第4周'],
    visitors: [28000, 32000, 35000, 31000],
    users: [18000, 21000, 24000, 20000],
    pageViews: [56000, 64000, 70000, 62000]
  },
  '90d': {
    categories: ['第1月', '第2月', '第3月'],
    visitors: [120000, 135000, 128000],
    users: [78000, 89000, 82000],
    pageViews: [240000, 270000, 256000]
  }
}

// ECharts 配置
const chartOption = computed(() => {
  const data = chartDataSets[selectedPeriod.value]
  
  return {
    backgroundColor: 'transparent',
    title: {
      show: false
    },
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#e4e7ed',
      borderWidth: 1,
      textStyle: {
        color: '#333'
      },
      formatter: function(params) {
        let tooltip = `<div style="margin-bottom: 8px; font-weight: 600;">${params[0].axisValueLabel}</div>`
        params.forEach(param => {
          tooltip += `
            <div style="display: flex; align-items: center; margin-bottom: 4px;">
              <span style="display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: ${param.color}; margin-right: 8px;"></span>
              <span style="flex: 1;">${param.seriesName}:</span>
              <span style="font-weight: 600; margin-left: 8px;">${param.value.toLocaleString()}</span>
            </div>
          `
        })
        return tooltip
      }
    },
    legend: {
      data: ['访问量', '独立访客', '页面浏览'],
      top: 10,
      right: 20,
      textStyle: {
        color: '#666',
        fontSize: 12
      },
      itemWidth: 12,
      itemHeight: 8
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '8%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: data.categories,
      axisLine: {
        lineStyle: {
          color: '#e4e7ed'
        }
      },
      axisLabel: {
        color: '#909399',
        fontSize: 11
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        color: '#909399',
        fontSize: 11,
        formatter: function(value) {
          if (value >= 1000) {
            return (value / 1000).toFixed(0) + 'k'
          }
          return value
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f0f2f5',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
              { offset: 0, color: '#409eff' },
              { offset: 1, color: '#66b1ff' }
            ]
          }
        },
        itemStyle: {
          color: '#409eff',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
              { offset: 1, color: 'rgba(64, 158, 255, 0.05)' }
            ]
          }
        },
        data: data.visitors,
        animationDuration: 2000,
        animationEasing: 'cubicOut'
      },
      {
        name: '独立访客',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
              { offset: 0, color: '#67c23a' },
              { offset: 1, color: '#85ce61' }
            ]
          }
        },
        itemStyle: {
          color: '#67c23a',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
              { offset: 1, color: 'rgba(103, 194, 58, 0.05)' }
            ]
          }
        },
        data: data.users,
        animationDuration: 2000,
        animationEasing: 'cubicOut',
        animationDelay: 300
      },
      {
        name: '页面浏览',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 6,
        lineStyle: {
          width: 3,
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 1, y2: 0,
            colorStops: [
              { offset: 0, color: '#e6a23c' },
              { offset: 1, color: '#f0c78a' }
            ]
          }
        },
        itemStyle: {
          color: '#e6a23c',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0, y: 0, x2: 0, y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
              { offset: 1, color: 'rgba(230, 162, 60, 0.05)' }
            ]
          }
        },
        data: data.pageViews,
        animationDuration: 2000,
        animationEasing: 'cubicOut',
        animationDelay: 600
      }
    ]
  }
})

// 排行榜数据
const rankingData = reactive([
  {
    name: '仪表盘',
    path: '/dashboard',
    visits: 12543,
    trend: { type: 'up', value: '+12%' }
  },
  {
    name: '用户管理',
    path: '/user-management',
    visits: 8765,
    trend: { type: 'up', value: '+8%' }
  },
  {
    name: '数据分析',
    path: '/analytics',
    visits: 6543,
    trend: { type: 'down', value: '-3%' }
  },
  {
    name: '系统设置',
    path: '/settings',
    visits: 4321,
    trend: { type: 'up', value: '+5%' }
  },
  {
    name: '报告中心',
    path: '/reports',
    visits: 3210,
    trend: { type: 'up', value: '+15%' }
  }
])

// 系统监控数据
const systemMetrics = reactive([
  { name: 'CPU使用率', value: 45 },
  { name: '内存使用率', value: 68 },
  { name: '磁盘使用率', value: 35 },
  { name: '网络负载', value: 28 }
])

// 最近活动
const recentActivities = reactive([
  {
    id: 1,
    text: '管理员 张三 创建了新用户',
    time: '2分钟前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 2,
    text: '用户 李四 修改了个人信息',
    time: '5分钟前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 3,
    text: '系统完成了数据备份',
    time: '10分钟前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  },
  {
    id: 4,
    text: '管理员 王五 生成了月度报告',
    time: '15分钟前',
    avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
  }
])

// 快捷工具
const quickTools = reactive([
  { name: '用户管理', icon: 'User', color: '#409eff' },
  { name: '文件管理', icon: 'Files', color: '#67c23a' },
  { name: '系统设置', icon: 'Setting', color: '#e6a23c' },
  { name: '数据备份', icon: 'Download', color: '#f56c6c' },
  { name: '日志查看', icon: 'Monitor', color: '#909399' },
  { name: '通知中心', icon: 'Bell', color: '#1db5db' }
])

// 方法
const handleQuickAction = (action) => {
  ElMessage.success(`执行快捷操作: ${action}`)
}

const handleStatClick = (stat) => {
  ElMessage.info(`查看详细信息: ${stat.label}`)
}

const handleChartClick = (params) => {
  ElMessage.info(`点击了图表数据: ${params.seriesName} - ${params.name}`)
}

const changePeriod = (period) => {
  selectedPeriod.value = period
  refreshData()
}

const refreshData = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
    ElMessage.success('数据刷新成功')
    
    // 模拟数据变化
    statsData.forEach(stat => {
      const change = Math.floor(Math.random() * 1000) - 500
      stat.value += change
    })
    
    // 重新触发数字动画
    animateNumbers()
  }, 1000)
}

const handleToolClick = (tool) => {
  ElMessage.success(`打开工具: ${tool.name}`)
}

const getMetricColor = (value) => {
  if (value < 50) return '#67c23a'
  if (value < 80) return '#e6a23c'
  return '#f56c6c'
}

// 数字动画
const animateNumbers = () => {
  statsData.forEach((stat, index) => {
    let current = 0
    const target = stat.value
    const increment = target / 100
    const timer = setInterval(() => {
      current += increment
      if (current >= target) {
        animatedNumbers.value[index] = target.toLocaleString()
        clearInterval(timer)
      } else {
        animatedNumbers.value[index] = Math.floor(current).toLocaleString()
      }
    }, 20)
  })
}

// 实时访客数据模拟
const updateRealtimeVisitors = () => {
  setInterval(() => {
    realtimeVisitors.value = Math.floor(Math.random() * 200) + 150
  }, 3000)
}

// 监听时间周期变化，更新图表
watch(selectedPeriod, () => {
  // 触发图表重新渲染
}, { immediate: true })

// 生命周期
onMounted(() => {
  animateNumbers()
  updateRealtimeVisitors()
})
</script>

<style scoped>
.overview-page {
  padding: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  min-height: calc(100vh - 60px);
  background-attachment: fixed;
  position: relative;
  overflow-y: auto;
}

.overview-page::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(120, 199, 255, 0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.overview-page > * {
  position: relative;
  z-index: 1;
}

/* 欢迎区域 */
.welcome-section {
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.08) 100%);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  margin: 20px;
  padding: 35px;
  color: white;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    inset 0 1px 0 rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
}

.welcome-section::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.03), transparent);
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.welcome-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.welcome-title {
  font-size: 32px;
  font-weight: 700;
  margin: 0 0 12px 0;
  background: linear-gradient(45deg, #fff, #e1f5fe, #fff);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textShine 3s ease-in-out infinite;
}

@keyframes textShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.welcome-subtitle {
  font-size: 16px;
  opacity: 0.95;
  margin: 0 0 8px 0;
  font-weight: 500;
}

.welcome-desc {
  font-size: 14px;
  opacity: 0.85;
  margin: 0;
  font-weight: 400;
}

.quick-actions {
  display: flex;
  gap: 15px;
}

.quick-actions .el-button {
  border-radius: 25px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 12px 24px;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.quick-actions .el-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.quick-actions .el-button:hover::before {
  left: 100%;
}

.quick-actions .el-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* 数据概览卡片 */
.data-overview {
  margin: 20px;
}

.stats-row {
  margin-bottom: 20px;
}

.stat-card {
  border-radius: 20px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  backdrop-filter: blur(10px);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--stat-color, #409eff);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 
    0 20px 50px rgba(0,0,0,0.15),
    0 8px 20px rgba(0,0,0,0.1);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-card-1::before { background: linear-gradient(135deg, #409eff, #66b1ff); }
.stat-card-2::before { background: linear-gradient(135deg, #67c23a, #85ce61); }
.stat-card-3::before { background: linear-gradient(135deg, #e6a23c, #f0c78a); }
.stat-card-4::before { background: linear-gradient(135deg, #f56c6c, #f78989); }

.stat-content {
  display: flex;
  align-items: center;
  padding: 25px;
  gap: 20px;
  position: relative;
  z-index: 2;
}

.stat-icon {
  width: 70px;
  height: 70px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1), rgba(64, 158, 255, 0.05));
  position: relative;
  overflow: hidden;
}

.stat-icon::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: iconRotate 4s linear infinite;
}

@keyframes iconRotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.stat-info {
  flex: 1;
}

.stat-number {
  font-size: 32px;
  font-weight: 800;
  color: #1a1a1a;
  margin-bottom: 6px;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.stat-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
  font-weight: 500;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 12px;
  width: fit-content;
}

.stat-trend.positive {
  color: #67c23a;
  background: rgba(103, 194, 58, 0.1);
}

.stat-trend.negative {
  color: #f56c6c;
  background: rgba(245, 108, 108, 0.1);
}

.stat-progress {
  padding: 0 25px 25px;
  position: relative;
  z-index: 2;
}

/* 图表区域 */
.chart-row {
  margin: 0 20px 20px;
}

.chart-card, .ranking-card {
  border-radius: 20px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.chart-card::before,
.ranking-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
}

.header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  background: linear-gradient(135deg, #1a1a1a, #333);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.card-subtitle {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-actions .el-button-group .el-button {
  border-radius: 15px;
  border: 1px solid #e4e7ed;
  padding: 6px 12px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.header-actions .el-button-group .el-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.chart-container {
  height: 350px;
  padding: 20px 0;
}

.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #999;
}

.chart-content {
  height: 100%;
  width: 100%;
}

.echarts-chart {
  height: 100% !important;
  width: 100% !important;
}

/* 实时数据区域 */
.realtime-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;
}

.realtime-number {
  text-align: center;
}

.realtime-number .number {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: #409eff;
  animation: pulse 2s infinite;
}

.realtime-number .label {
  font-size: 12px;
  color: #666;
}

.realtime-chart {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pulse-dot {
  width: 12px;
  height: 12px;
  background: #67c23a;
  border-radius: 50%;
  position: relative;
  animation: ripple 2s infinite;
}

.pulse-dot::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  width: 32px;
  height: 32px;
  border: 2px solid #67c23a;
  border-radius: 50%;
  animation: ripple 2s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes ripple {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* 排行榜 */
.ranking-list {
  max-height: 280px;
  overflow-y: auto;
}

.ranking-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  animation: slideInRight 0.6s ease-out;
  transition: background-color 0.2s ease;
}

.ranking-item:hover {
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.ranking-item:last-child {
  border-bottom: none;
}

.rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: white;
  margin-right: 12px;
}

.rank-1 { background: linear-gradient(135deg, #ffd700, #ffed4e); color: #333; }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #e8e8e8); color: #333; }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #daa520); }
.rank:not(.rank-1):not(.rank-2):not(.rank-3) { background: #e0e0e0; color: #666; }

.page-info {
  flex: 1;
  margin-right: 12px;
}

.page-name {
  font-size: 14px;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.page-path {
  font-size: 12px;
  color: #999;
}

.visit-stats {
  text-align: right;
}

.visit-count {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 2px;
}

.visit-trend {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 12px;
}

.visit-trend.up { color: #67c23a; }
.visit-trend.down { color: #f56c6c; }

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 底部区域 */
.bottom-section {
  margin: 0 20px 20px;
}

.system-card, .activity-card, .tools-card {
  border-radius: 20px;
  border: none;
  box-shadow: 
    0 8px 32px rgba(0,0,0,0.12),
    0 2px 8px rgba(0,0,0,0.08);
  background: linear-gradient(135deg, #fff 0%, #fafbfc 100%);
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.system-card:hover,
.activity-card:hover,
.tools-card:hover {
  transform: translateY(-5px);
}

.system-card::before,
.activity-card::before,
.tools-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.05) 100%);
  pointer-events: none;
}

/* 系统监控 */
.system-metrics {
  padding: 10px 0;
}

.metric-item {
  margin-bottom: 20px;
}

.metric-item:last-child {
  margin-bottom: 0;
}

.metric-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.metric-name {
  font-size: 14px;
  color: #666;
}

.metric-value {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
}

/* 活动列表 */
.activity-list {
  max-height: 300px;
  overflow-y: auto;
}

.activity-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}

.activity-item:hover {
  background-color: #f8f9fa;
  border-radius: 8px;
  margin: 0 -12px;
  padding-left: 12px;
  padding-right: 12px;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-avatar {
  margin-right: 12px;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 14px;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.activity-time {
  font-size: 12px;
  color: #999;
}

/* 快捷工具 */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 10px 0;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.tool-item::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,0.8), rgba(255,255,255,0.4));
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  transform: translate(-50%, -50%);
}

.tool-item:hover {
  background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

.tool-item:hover::before {
  width: 100%;
  height: 100%;
}

.tool-name {
  font-size: 12px;
  color: #666;
  text-align: center;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.tool-item:hover .tool-name {
  color: #333;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .welcome-content {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }
  
  .chart-row .el-col:first-child {
    margin-bottom: 20px;
  }
  
  .bottom-section .el-col {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .overview-page {
    margin: 0;
  }
  
  .welcome-section, .data-overview, .chart-row, .bottom-section {
    margin: 10px;
  }
  
  .stats-row .el-col {
    margin-bottom: 12px;
  }
  
  .tools-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .stat-content {
    padding: 16px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .welcome-title {
    font-size: 24px;
  }
}

/* 滚动条样式 */
.ranking-list::-webkit-scrollbar,
.activity-list::-webkit-scrollbar {
  width: 4px;
}

.ranking-list::-webkit-scrollbar-track,
.activity-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 2px;
}

.ranking-list::-webkit-scrollbar-thumb,
.activity-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 2px;
}

.ranking-list::-webkit-scrollbar-thumb:hover,
.activity-list::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}
</style>
